<template>
  <div>
    <!-- 查询模块开始 -->
    <el-form :inline="true" :model="customerForm" class="demo-form-inline">
      <!-- {{value2}}  value-format="timestamp"  转化为时间措格式 -->
      <el-form-item>
        <el-date-picker
          value-format="timestamp"
          v-model="timeValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-select v-model="customerForm.type" clearable placeholder="请选择类型">
          <el-option label="充值" value="充值"></el-option>
          <el-option label="收益" value="收益"></el-option>
          <el-option label="提现" value="提现"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="customerForm.status" clearable placeholder="请选择状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="customerForm.userId" clearable placeholder="顾客编号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </el-form-item> 
    </el-form>
    <!-- 查询模块结束 -->

    <!-- 表格开始 -->
     <div>
      <!-- {{customTable}} -->
      <el-table :data="customTable" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号"></el-table-column>
        <el-table-column prop="userId" label="编号"></el-table-column>
        <el-table-column prop="transferMoney" label="交易金额"></el-table-column>
        <el-table-column prop="transferTime" label="交易时间">
          <template slot-scope="scope">
            {{moment(scope.row.transferTime).format('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型"></el-table-column>
        <el-table-column prop="status" label="状态">
             <template slot-scope="scope">
               <el-tag type="success" v-if='scope.row.status==="正常"'>正常</el-tag>
               <el-tag type="danger" v-else>未审核</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="type" label="描述"></el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
     <!-- 分页开始 -->
     <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
let moment = require('moment')
import { customerData } from "@/api/bill";
export default {
   props:{},
  // 不希望当前页面的数据模型被其他页面复用
  data() {
    return {
      userDate:[],
      customTable:[],
      total:0,
      // 时间日期配置项
      customerForm: {},
      timeValue: [],
      params: {
        page: 1,
        pageSize: 10,
        userId:'',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },

  created() {
    this.customPro()
  },

   watch: {
    params: {
      handler() {
        this.customPro();
      },
      deep: true
    }
  },

  methods: {
    moment,
    // 分页查询顾客数据
    async customPro() {
      let temp = {
        ...this.params,
        ...this.customerForm,
      }
      if (this.timeValue) {
        (temp.beginTime = this.timeValue[0]),
        (temp.endTime = this.timeValue[1]);
      }
       for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await customerData(temp);
      this.customTable = res.data.list;
      this.total = res.data.total;
    },

    // 给查询按钮绑定事件
    toSearch() {
      this.customPro()
    },

    // 处理每页显示的条数
    handleSizeChange(pageSize) {
      //   console.log(`每页 ${val} 条`);
      this.params.pageSize = pageSize;
      this.params.page = 1;
    },
    // 处理当前页
    handleCurrentChange(page) {
      //   console.log(`当前页: ${val}`);
      this.params.page = page;
    },

  },
};
</script>

<style>
</style>